/* HERO - THEME 3 VARIANT: OCEAN CYAN */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&display=swap');

.ebhro5-hero {
  /* ===============================
     COLORS
  =============================== */
  --ebhro5-bg-color: linear-gradient(160deg, #0b1329 0%, #0f1a3a 40%, #0a1628 100%);

  --ebhro5-badge-color: #06b6d4;
  --ebhro5-badge-bg: rgba(6, 182, 212, 0.05);
  --ebhro5-badge-border-color: rgba(6, 182, 212, 0.1);

  --ebhro5-title-color: #e2f0fa;
  --ebhro5-desc-color: rgba(148, 176, 204, .4);
  --ebhro5-count-color: rgba(6, 182, 212, 0.03);

  --ebhro5-grid-line-color: rgba(6, 182, 212, 0.02);
  --ebhro5-grid-mask-color: #000;

  --ebhro5-aurora-wave-1-color: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.012), rgba(56, 189, 248, 0.015), transparent);
  --ebhro5-aurora-wave-2-color: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.008), rgba(6, 182, 212, 0.012), transparent);

  --ebhro5-shimmer-color: linear-gradient(135deg, transparent 30%, rgba(56, 189, 248, 0.005) 50%, transparent 70%);

  --ebhro5-orb1-bg: radial-gradient(circle, rgba(6, 182, 212, 0.06), transparent 70%);
  --ebhro5-orb2-bg: radial-gradient(circle, rgba(56, 189, 248, 0.04), transparent 70%);
  --ebhro5-orb3-bg: radial-gradient(circle, rgba(6, 182, 212, 0.03), transparent 70%);

  --ebhro5-particle-bg: #06b6d4;
  --ebhro5-particle-bg-secondary: #38bdf8;

  --ebhro5-sb1-bg: radial-gradient(circle, rgba(6, 182, 212, 0.06), transparent 70%);
  --ebhro5-sb2-bg: radial-gradient(circle, rgba(56, 189, 248, 0.04), transparent 70%);
  --ebhro5-sb3-bg: radial-gradient(circle, rgba(6, 182, 212, 0.03), transparent 70%);

  --ebhro5-hl-bg: linear-gradient(135deg, #06b6d4, #38bdf8);

  --ebhro5-num-color: #06b6d4;
  --ebhro5-sp-color: #38bdf8;
  --ebhro5-sl-color: rgba(148, 176, 204, .4);

  --ebhro5-stats-bg: rgba(255, 255, 255, 0.02);
  --ebhro5-stats-border-color: rgba(255, 255, 255, 0.04);
  --ebhro5-stat-sep-bg: rgba(255, 255, 255, 0.04);

  --ebhro5-btn-primary-bg: linear-gradient(135deg, #06b6d4, #38bdf8);
  --ebhro5-btn-primary-color: #ffffff;
  --ebhro5-btn-primary-shadow: 0 4px 20px rgba(6, 182, 212, 0.2);
  --ebhro5-btn-primary-hover-shadow: 0 8px 30px rgba(6, 182, 212, 0.3);
  --ebhro5-btn-secondary-bg: rgba(255, 255, 255, 0.03);
  --ebhro5-btn-secondary-border-color: rgba(255, 255, 255, 0.06);
  --ebhro5-btn-secondary-color: #e2f0fa;
  --ebhro5-btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
  --ebhro5-btn-secondary-hover-border-color: #06b6d4;

  --ebhro5-arrow-bg: rgba(255, 255, 255, 0.02);
  --ebhro5-arrow-border-color: rgba(255, 255, 255, 0.04);
  --ebhro5-arrow-color: #e2f0fa;
  --ebhro5-arrow-hover-bg: rgba(6, 182, 212, 0.08);
  --ebhro5-arrow-hover-border-color: #06b6d4;
  --ebhro5-arrow-hover-color: #06b6d4;

  --ebhro5-dot-bg: rgba(255, 255, 255, 0.08);
  --ebhro5-dot-active-bg: linear-gradient(90deg, #06b6d4, #38bdf8);

  --ebhro5-progress-bg: rgba(255, 255, 255, 0.02);
  --ebhro5-progress-bar-bg: linear-gradient(90deg, #06b6d4, #38bdf8);

  /* ===============================
     AURORA WAVE
  =============================== */
  --ebhro5-aurora-wave-1-height: 120px;
  --ebhro5-aurora-wave-1-top: 25%;
  --ebhro5-aurora-wave-1-blur: 40px;
  --ebhro5-aurora-wave-1-animation-duration: 8s;

  --ebhro5-aurora-wave-2-height: 80px;
  --ebhro5-aurora-wave-2-top: 60%;
  --ebhro5-aurora-wave-2-blur: 30px;
  --ebhro5-aurora-wave-2-animation-duration: 11s;

  --ebhro5-aurora-wave-left: -10%;
  --ebhro5-aurora-wave-width: 120%;

  /* ===============================
     SHIMMER
  =============================== */
  --ebhro5-shimmer-size: 200% 200%;
  --ebhro5-shimmer-animation-duration: 6s;

  /* ===============================
     ATMOSPHERE ORBS
  =============================== */
  --ebhro5-orb1-size: 450px;
  --ebhro5-orb1-top: -15%;
  --ebhro5-orb1-right: -12%;
  --ebhro5-orb1-blur: 80px;
  --ebhro5-orb1-animation-duration: 15s;

  --ebhro5-orb2-size: 350px;
  --ebhro5-orb2-bottom: -18%;
  --ebhro5-orb2-left: -10%;
  --ebhro5-orb2-blur: 80px;
  --ebhro5-orb2-animation-duration: 19s;

  --ebhro5-orb3-size: 250px;
  --ebhro5-orb3-top: 30%;
  --ebhro5-orb3-left: 45%;
  --ebhro5-orb3-blur: 80px;
  --ebhro5-orb3-animation-duration: 13s;

  /* ===============================
     SLIDE BLOBS
  =============================== */
  --ebhro5-sb1-size: 300px;
  --ebhro5-sb1-top: -70px;
  --ebhro5-sb1-left: -70px;
  --ebhro5-sb1-animation-duration: 10s;

  --ebhro5-sb2-size: 220px;
  --ebhro5-sb2-bottom: -50px;
  --ebhro5-sb2-right: -50px;
  --ebhro5-sb2-animation-duration: 12s;

  --ebhro5-sb3-size: 180px;
  --ebhro5-sb3-top: 40%;
  --ebhro5-sb3-right: 25%;
  --ebhro5-sb3-animation-duration: 8s;

  /* ===============================
     PARTICLES
  =============================== */
  --ebhro5-particle-size: 3px;
  --ebhro5-particle-animation-duration: 5s;
  --ebhro5-particle-opacity: .4;
  --ebhro5-particle-translate-y: -25px;

  --ebhro5-particle-1-left: 10%;
  --ebhro5-particle-1-top: 20%;
  --ebhro5-particle-1-delay: 0s;
  --ebhro5-particle-2-left: 85%;
  --ebhro5-particle-2-top: 15%;
  --ebhro5-particle-2-delay: .6s;
  --ebhro5-particle-3-left: 70%;
  --ebhro5-particle-3-top: 75%;
  --ebhro5-particle-3-delay: 1.2s;
  --ebhro5-particle-4-left: 25%;
  --ebhro5-particle-4-top: 80%;
  --ebhro5-particle-4-delay: 1.8s;
  --ebhro5-particle-5-left: 50%;
  --ebhro5-particle-5-top: 50%;
  --ebhro5-particle-5-delay: 2.4s;
  --ebhro5-particle-6-left: 15%;
  --ebhro5-particle-6-top: 55%;
  --ebhro5-particle-6-delay: 3s;
  --ebhro5-particle-7-left: 90%;
  --ebhro5-particle-7-top: 45%;
  --ebhro5-particle-7-delay: 3.6s;
  --ebhro5-particle-8-left: 40%;
  --ebhro5-particle-8-top: 10%;
  --ebhro5-particle-8-delay: 4.2s;

  /* ===============================
     TYPOGRAPHY
  =============================== */
  --ebhro5-font-family: 'El Messiri', sans-serif;

  --ebhro5-title-font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  --ebhro5-title-font-weight: 700;
  --ebhro5-title-line-height: 1.2;
  --ebhro5-title-letter-spacing: -.01em;

  --ebhro5-desc-font-size: .9rem;
  --ebhro5-desc-line-height: 1.7;
  --ebhro5-desc-max-width: 500px;

  --ebhro5-badge-font-size: .78rem;
  --ebhro5-badge-font-weight: 600;
  --ebhro5-badge-padding: .35rem 1rem;
  --ebhro5-badge-gap: .5rem;
  --ebhro5-badge-border-radius: 100px;
  --ebhro5-badge-border-width: 1px;
  --ebhro5-badge-blur: 10px;

  --ebhro5-num-font-size: 1.3rem;
  --ebhro5-num-font-weight: 700;

  --ebhro5-sp-font-size: .8rem;
  --ebhro5-sp-font-weight: 700;

  --ebhro5-sl-font-size: .65rem;
  --ebhro5-sl-font-weight: 500;

  --ebhro5-arrow-font-size: .8rem;

  /* ===============================
     LAYOUT
  =============================== */
  --ebhro5-stage-max-width: 1100px;
  --ebhro5-stage-padding: 4rem 2rem;
  --ebhro5-stage-padding-mobile: 5rem 1rem 2rem;
  --ebhro5-hero-min-height: 100vh;
  --ebhro5-inset-zero: 0;
  --ebhro5-pos-zero: 0;
  --ebhro5-opacity-zero: 0;
  --ebhro5-opacity-one: 1;
  --ebhro5-radius-full: 50%;
  --ebhro5-width-full: 100%;
  --ebhro5-height-full: 100%;
  --ebhro5-margin-auto: 0 auto;
  --ebhro5-z-atmos: 0;
  --ebhro5-z-grid: 0;
  --ebhro5-z-particles: 1;
  --ebhro5-z-stage: 3;
  --ebhro5-z-layout: 2;
  --ebhro5-z-count: 0;
  --ebhro5-z-content: 2;
  --ebhro5-z-slide-bg: 0;
  --ebhro5-z-nav: 10;
  --ebhro5-z-progress: 10;

  --ebhro5-layout-gap: 2rem;
  --ebhro5-layout-grid-template-columns: 1fr;

  --ebhro5-content-gap: 1.25rem;
  --ebhro5-content-translate-y: 20px;
  --ebhro5-content-translate-zero: 0;

  /* Count */
  --ebhro5-count-top: -10px;
  --ebhro5-count-left: 0;
  --ebhro5-count-font-size: clamp(5rem, 12vw, 10rem);
  --ebhro5-count-font-weight: 700;
  --ebhro5-count-line-height: 1;

  /* ===============================
     STATS
  =============================== */
  --ebhro5-stats-gap: 1.2rem;
  --ebhro5-stats-padding: 1rem 1.5rem;
  --ebhro5-stats-padding-mobile: .8rem 1rem;
  --ebhro5-stats-gap-mobile: .8rem;
  --ebhro5-stats-border-radius: 999px;
  --ebhro5-stats-border-width: 1px;
  --ebhro5-stats-blur: 16px;

  --ebhro5-stat-gap: .1rem;

  --ebhro5-stat-sep-width: 1px;
  --ebhro5-stat-sep-height: 28px;

  /* ===============================
     SLIDE
  =============================== */
  --ebhro5-slide-bg-border-radius: 24px;

  /* ===============================
     BUTTONS
  =============================== */
  --ebhro5-btn-padding: .6rem 1.4rem;
  --ebhro5-btn-gap: .5rem;
  --ebhro5-btn-border-radius: 999px;
  --ebhro5-btn-font-size: .85rem;
  --ebhro5-btn-font-weight: 600;
  --ebhro5-btn-border: none;
  --ebhro5-btn-secondary-border-width: 1px;
  --ebhro5-btn-transition-duration: .3s;
  --ebhro5-btn-transition-easing: cubic-bezier(.16, 1, .3, 1);
  --ebhro5-btns-gap: .8rem;
  --ebhro5-btn-primary-hover-transform: translateY(-2px);

  /* ===============================
     NAVIGATION
  =============================== */
  --ebhro5-nav-gap: 1.2rem;
  --ebhro5-nav-padding: 1.5rem 2rem 2rem;

  --ebhro5-arrow-size: 36px;
  --ebhro5-arrow-border-width: 1px;
  --ebhro5-arrow-border-radius: 50%;
  --ebhro5-arrow-transition-duration: .3s;
  --ebhro5-arrow-transition-easing: ease;

  --ebhro5-indicators-gap: .6rem;

  --ebhro5-dot-size: 7px;
  --ebhro5-dot-border-radius: 50%;
  --ebhro5-dot-active-width: 22px;
  --ebhro5-dot-active-border-radius: 999px;
  --ebhro5-dot-transition-duration: .4s;
  --ebhro5-dot-transition-easing: ease;

  /* ===============================
     PROGRESS
  =============================== */
  --ebhro5-progress-height: 2px;
  --ebhro5-progress-bar-width: 0%;
  --ebhro5-progress-bar-border-radius: 2px;

  /* ===============================
     GRID
  =============================== */
  --ebhro5-grid-size: 60px;
  --ebhro5-grid-mask-ellipse-x: 65%;
  --ebhro5-grid-mask-ellipse-y: 55%;
  --ebhro5-grid-mask-at: 50% 50%;
  --ebhro5-grid-mask-solid: 25%;
  --ebhro5-grid-mask-fade: 100%;
  --ebhro5-grid-line-size: 1px;
  --ebhro5-grid-line-angle: 90deg;

  /* ===============================
     ANIMATIONS & TRANSITIONS
  =============================== */
  --ebhro5-slide-in-duration: .9s;
  --ebhro5-slide-out-duration: .6s;
  --ebhro5-slide-easing: cubic-bezier(.16, 1, .3, 1);
  --ebhro5-animation-timing: ease-in-out;
  --ebhro5-animation-iteration: infinite;

  --ebhro5-transition-duration: .7s;
  --ebhro5-transition-delay: .1s;
  --ebhro5-transition-easing: cubic-bezier(.16, 1, .3, 1);

  /* ===============================
     KEYFRAME VALUES
  =============================== */
  --ebhro5-float-origin: translate(0, 0) scale(1);

  --ebhro5-drift1-x1: 30px;
  --ebhro5-drift1-y1: 40px;
  --ebhro5-drift1-scale1: 1.05;
  --ebhro5-drift1-x2: -25px;
  --ebhro5-drift1-y2: -30px;
  --ebhro5-drift1-scale2: .98;

  --ebhro5-drift2-x: -30px;
  --ebhro5-drift2-y: -35px;
  --ebhro5-drift2-scale: 1.07;

  --ebhro5-drift3-x1: 25px;
  --ebhro5-drift3-y1: -30px;
  --ebhro5-drift3-scale1: 1.03;
  --ebhro5-drift3-x2: -20px;
  --ebhro5-drift3-y2: 20px;
  --ebhro5-drift3-scale2: 1.05;

  --ebhro5-blobA-x: 40px;
  --ebhro5-blobA-y: 30px;
  --ebhro5-blobA-scale: 1.08;

  --ebhro5-blobB-x: -30px;
  --ebhro5-blobB-y: -25px;
  --ebhro5-blobB-scale: 1.1;

  --ebhro5-blobC-x: 25px;
  --ebhro5-blobC-y: -35px;
  --ebhro5-blobC-scale: 1.05;

  --ebhro5-aurora-wave-transform-rest: translateX(-5%) scaleY(1) scaleX(1);
  --ebhro5-aurora-wave-opacity-rest: .4;
  --ebhro5-aurora-wave-transform-25: translateX(5%) scaleY(1.15) scaleX(1.02);
  --ebhro5-aurora-wave-opacity-25: .6;
  --ebhro5-aurora-wave-transform-50: translateX(0) scaleY(.95) scaleX(.98);
  --ebhro5-aurora-wave-opacity-50: .5;
  --ebhro5-aurora-wave-transform-75: translateX(-3%) scaleY(1.1) scaleX(1.05);
  --ebhro5-aurora-wave-opacity-75: .45;

  --ebhro5-shimmer-bg-pos-rest: 0% 50%;
  --ebhro5-shimmer-opacity-rest: .3;
  --ebhro5-shimmer-bg-pos-mid: 100% 50%;
  --ebhro5-shimmer-opacity-mid: .7;

  --ebhro5-sparkle-transform-rest: translateY(0) scale(.5);
  --ebhro5-sparkle-scale-mid: 1;
  --ebhro5-sparkle-box-shadow: 0 0 6px currentColor;

  --ebhro5-hl-bg-size: 200% 200%;
  --ebhro5-hl-bg-pos-rest: 0% 50%;
  --ebhro5-hl-bg-pos-mid: 100% 50%;
  --ebhro5-gradient-shift-duration: 4s;

  --ebhro5-slide-in-perspective: 900px;
  --ebhro5-slide-in-rotate-y: 8deg;
  --ebhro5-slide-in-translate-x: 30px;
  --ebhro5-slide-out-rotate-y: -8deg;
  --ebhro5-slide-out-translate-x: -20px;
  --ebhro5-slide-rotate-final: 0;
  --ebhro5-slide-translate-final: 0;

  /* ===============================
     PREFERS-REDUCED-MOTION
  =============================== */
  --ebhro5-atmos-reduced-opacity: .3;
  --ebhro5-grid-shimmer-reduced-opacity: .15;
  --ebhro5-particle-reduced-opacity: .3;

  /* ===============================
     RESPONSIVE
  =============================== */
  --ebhro5-title-font-size-mobile: 1.4rem;

  /* ===============================
     EBAR (theme switcher variables)
  =============================== */
  --ebar-c1: #06b6d4;
  --ebar-c2: #38bdf8;
  --ebar-c3: #0b1329;

  /* ===============================
     COMPONENT STYLES
  =============================== */
  position: relative;
  min-height: var(--ebhro5-hero-min-height);
  background: var(--ebhro5-bg-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  font-family: var(--ebhro5-font-family);
  direction: rtl;
}

.ebhro5-atmos {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  pointer-events: none;
  z-index: var(--ebhro5-z-atmos);
  overflow: hidden;
}

.ebhro5-atmos::before,
.ebhro5-atmos::after {
  content: '';
  position: absolute;
  left: var(--ebhro5-aurora-wave-left);
  width: var(--ebhro5-aurora-wave-width);
  border-radius: var(--ebhro5-radius-full);
  filter: blur(var(--ebhro5-aurora-wave-1-blur));
  pointer-events: none;
}

.ebhro5-atmos::before {
  top: var(--ebhro5-aurora-wave-1-top);
  height: var(--ebhro5-aurora-wave-1-height);
  background: var(--ebhro5-aurora-wave-1-color);
  animation: eb5-aurora-wave var(--ebhro5-aurora-wave-1-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-atmos::after {
  top: var(--ebhro5-aurora-wave-2-top);
  height: var(--ebhro5-aurora-wave-2-height);
  background: var(--ebhro5-aurora-wave-2-color);
  filter: blur(var(--ebhro5-aurora-wave-2-blur));
  animation: eb5-aurora-wave var(--ebhro5-aurora-wave-2-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration) reverse;
}

.ebhro5-atmos-orb {
  position: absolute;
  border-radius: var(--ebhro5-radius-full);
  filter: blur(var(--ebhro5-orb1-blur));
}

.ebhro5-ao-1 {
  width: var(--ebhro5-orb1-size);
  height: var(--ebhro5-orb1-size);
  background: var(--ebhro5-orb1-bg);
  top: var(--ebhro5-orb1-top);
  right: var(--ebhro5-orb1-right);
  animation: eb5-drift1 var(--ebhro5-orb1-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-ao-2 {
  width: var(--ebhro5-orb2-size);
  height: var(--ebhro5-orb2-size);
  background: var(--ebhro5-orb2-bg);
  bottom: var(--ebhro5-orb2-bottom);
  left: var(--ebhro5-orb2-left);
  animation: eb5-drift2 var(--ebhro5-orb2-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-ao-3 {
  width: var(--ebhro5-orb3-size);
  height: var(--ebhro5-orb3-size);
  background: var(--ebhro5-orb3-bg);
  top: var(--ebhro5-orb3-top);
  left: var(--ebhro5-orb3-left);
  animation: eb5-drift3 var(--ebhro5-orb3-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

@keyframes eb5-drift1 {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  33% { transform: translate(var(--ebhro5-drift1-x1), var(--ebhro5-drift1-y1)) scale(var(--ebhro5-drift1-scale1)) }
  66% { transform: translate(var(--ebhro5-drift1-x2), var(--ebhro5-drift1-y2)) scale(var(--ebhro5-drift1-scale2)) }
}

@keyframes eb5-drift2 {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  50% { transform: translate(var(--ebhro5-drift2-x), var(--ebhro5-drift2-y)) scale(var(--ebhro5-drift2-scale)) }
}

@keyframes eb5-drift3 {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  25% { transform: translate(var(--ebhro5-drift3-x1), var(--ebhro5-drift3-y1)) scale(var(--ebhro5-drift3-scale1)) }
  75% { transform: translate(var(--ebhro5-drift3-x2), var(--ebhro5-drift3-y2)) scale(var(--ebhro5-drift3-scale2)) }
}

@keyframes eb5-aurora-wave {
  0%, 100% { transform: var(--ebhro5-aurora-wave-transform-rest); opacity: var(--ebhro5-aurora-wave-opacity-rest) }
  25% { transform: var(--ebhro5-aurora-wave-transform-25); opacity: var(--ebhro5-aurora-wave-opacity-25) }
  50% { transform: var(--ebhro5-aurora-wave-transform-50); opacity: var(--ebhro5-aurora-wave-opacity-50) }
  75% { transform: var(--ebhro5-aurora-wave-transform-75); opacity: var(--ebhro5-aurora-wave-opacity-75) }
}

@keyframes eb5-shimmer {
  0%, 100% { background-position: var(--ebhro5-shimmer-bg-pos-rest); opacity: var(--ebhro5-shimmer-opacity-rest) }
  50% { background-position: var(--ebhro5-shimmer-bg-pos-mid); opacity: var(--ebhro5-shimmer-opacity-mid) }
}

.ebhro5-atmos-grid {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  background-image:
    linear-gradient(var(--ebhro5-grid-line-color) var(--ebhro5-grid-line-size), transparent var(--ebhro5-grid-line-size)),
    linear-gradient(var(--ebhro5-grid-line-angle), var(--ebhro5-grid-line-color) var(--ebhro5-grid-line-size), transparent var(--ebhro5-grid-line-size));
  background-size: var(--ebhro5-grid-size) var(--ebhro5-grid-size);
  mask-image: radial-gradient(ellipse var(--ebhro5-grid-mask-ellipse-x) var(--ebhro5-grid-mask-ellipse-y) at var(--ebhro5-grid-mask-at), var(--ebhro5-grid-mask-color) var(--ebhro5-grid-mask-solid), transparent var(--ebhro5-grid-mask-fade));
  -webkit-mask-image: radial-gradient(ellipse var(--ebhro5-grid-mask-ellipse-x) var(--ebhro5-grid-mask-ellipse-y) at var(--ebhro5-grid-mask-at), var(--ebhro5-grid-mask-color) var(--ebhro5-grid-mask-solid), transparent var(--ebhro5-grid-mask-fade));
}

.ebhro5-atmos-grid::after {
  content: '';
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  background: var(--ebhro5-shimmer-color);
  background-size: var(--ebhro5-shimmer-size);
  animation: eb5-shimmer var(--ebhro5-shimmer-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-particles {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  pointer-events: none;
  z-index: var(--ebhro5-z-particles);
  overflow: hidden;
}

.ebhro5-particle {
  position: absolute;
  width: var(--ebhro5-particle-size);
  height: var(--ebhro5-particle-size);
  border-radius: var(--ebhro5-radius-full);
  background: var(--ebhro5-particle-bg);
  opacity: var(--ebhro5-opacity-zero);
  animation: eb5-sparkle var(--ebhro5-particle-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-particle:nth-child(1) { left: var(--ebhro5-particle-1-left); top: var(--ebhro5-particle-1-top); animation-delay: var(--ebhro5-particle-1-delay) }
.ebhro5-particle:nth-child(2) { left: var(--ebhro5-particle-2-left); top: var(--ebhro5-particle-2-top); background: var(--ebhro5-particle-bg-secondary); animation-delay: var(--ebhro5-particle-2-delay) }
.ebhro5-particle:nth-child(3) { left: var(--ebhro5-particle-3-left); top: var(--ebhro5-particle-3-top); animation-delay: var(--ebhro5-particle-3-delay) }
.ebhro5-particle:nth-child(4) { left: var(--ebhro5-particle-4-left); top: var(--ebhro5-particle-4-top); background: var(--ebhro5-particle-bg-secondary); animation-delay: var(--ebhro5-particle-4-delay) }
.ebhro5-particle:nth-child(5) { left: var(--ebhro5-particle-5-left); top: var(--ebhro5-particle-5-top); animation-delay: var(--ebhro5-particle-5-delay) }
.ebhro5-particle:nth-child(6) { left: var(--ebhro5-particle-6-left); top: var(--ebhro5-particle-6-top); animation-delay: var(--ebhro5-particle-6-delay) }
.ebhro5-particle:nth-child(7) { left: var(--ebhro5-particle-7-left); top: var(--ebhro5-particle-7-top); background: var(--ebhro5-particle-bg-secondary); animation-delay: var(--ebhro5-particle-7-delay) }
.ebhro5-particle:nth-child(8) { left: var(--ebhro5-particle-8-left); top: var(--ebhro5-particle-8-top); animation-delay: var(--ebhro5-particle-8-delay) }

@keyframes eb5-sparkle {
  0%, 100% { opacity: var(--ebhro5-opacity-zero); transform: var(--ebhro5-sparkle-transform-rest) }
  50% { opacity: var(--ebhro5-particle-opacity); transform: translateY(var(--ebhro5-particle-translate-y)) scale(var(--ebhro5-sparkle-scale-mid)); box-shadow: var(--ebhro5-sparkle-box-shadow) }
}

.ebhro5-stage {
  position: relative;
  z-index: var(--ebhro5-z-stage);
  width: var(--ebhro5-width-full);
  max-width: var(--ebhro5-stage-max-width);
  margin: var(--ebhro5-margin-auto);
  padding: var(--ebhro5-stage-padding);
}

.ebhro5-slide {
  display: none;
}

.ebhro5-slide.ebhro5-active {
  display: block;
  animation: eb5-s1in var(--ebhro5-slide-in-duration) var(--ebhro5-slide-easing) both;
}

.ebhro5-slide.ebhro5-prev {
  display: block;
  position: absolute;
  top: var(--ebhro5-pos-zero);
  left: var(--ebhro5-pos-zero);
  right: var(--ebhro5-pos-zero);
  animation: eb5-s1out var(--ebhro5-slide-out-duration) var(--ebhro5-slide-easing) both;
}

@keyframes eb5-s1in {
  0% { opacity: var(--ebhro5-opacity-zero); transform: perspective(var(--ebhro5-slide-in-perspective)) rotateY(var(--ebhro5-slide-in-rotate-y)) translateX(var(--ebhro5-slide-in-translate-x)) }
  100% { opacity: var(--ebhro5-opacity-one); transform: perspective(var(--ebhro5-slide-in-perspective)) rotateY(var(--ebhro5-slide-rotate-final)) translateX(var(--ebhro5-slide-translate-final)) }
}

@keyframes eb5-s1out {
  0% { opacity: var(--ebhro5-opacity-one); transform: perspective(var(--ebhro5-slide-in-perspective)) rotateY(var(--ebhro5-slide-rotate-final)) }
  100% { opacity: var(--ebhro5-opacity-zero); transform: perspective(var(--ebhro5-slide-in-perspective)) rotateY(var(--ebhro5-slide-out-rotate-y)) translateX(var(--ebhro5-slide-out-translate-x)) }
}

.ebhro5-slide-bg {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  pointer-events: none;
  z-index: var(--ebhro5-z-slide-bg);
  overflow: hidden;
  border-radius: var(--ebhro5-slide-bg-border-radius);
}

.ebhro5-slide-blob {
  position: absolute;
  border-radius: var(--ebhro5-radius-full);
}

.ebhro5-sb-1 {
  width: var(--ebhro5-sb1-size);
  height: var(--ebhro5-sb1-size);
  background: var(--ebhro5-sb1-bg);
  top: var(--ebhro5-sb1-top);
  left: var(--ebhro5-sb1-left);
  animation: eb5-blobA var(--ebhro5-sb1-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-sb-2 {
  width: var(--ebhro5-sb2-size);
  height: var(--ebhro5-sb2-size);
  background: var(--ebhro5-sb2-bg);
  bottom: var(--ebhro5-sb2-bottom);
  right: var(--ebhro5-sb2-right);
  animation: eb5-blobB var(--ebhro5-sb2-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-sb-3 {
  width: var(--ebhro5-sb3-size);
  height: var(--ebhro5-sb3-size);
  background: var(--ebhro5-sb3-bg);
  top: var(--ebhro5-sb3-top);
  right: var(--ebhro5-sb3-right);
  animation: eb5-blobC var(--ebhro5-sb3-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

@keyframes eb5-blobA {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  50% { transform: translate(var(--ebhro5-blobA-x), var(--ebhro5-blobA-y)) scale(var(--ebhro5-blobA-scale)) }
}

@keyframes eb5-blobB {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  50% { transform: translate(var(--ebhro5-blobB-x), var(--ebhro5-blobB-y)) scale(var(--ebhro5-blobB-scale)) }
}

@keyframes eb5-blobC {
  0%, 100% { transform: var(--ebhro5-float-origin) }
  50% { transform: translate(var(--ebhro5-blobC-x), var(--ebhro5-blobC-y)) scale(var(--ebhro5-blobC-scale)) }
}

.ebhro5-layout {
  display: grid;
  grid-template-columns: var(--ebhro5-layout-grid-template-columns);
  gap: var(--ebhro5-layout-gap);
  position: relative;
  z-index: var(--ebhro5-z-layout);
}

.ebhro5-count {
  position: absolute;
  top: var(--ebhro5-count-top);
  left: var(--ebhro5-count-left);
  font-size: var(--ebhro5-count-font-size);
  font-weight: var(--ebhro5-count-font-weight);
  color: var(--ebhro5-count-color);
  line-height: var(--ebhro5-count-line-height);
  pointer-events: none;
  z-index: var(--ebhro5-z-count);
}

.ebhro5-content {
  display: flex;
  flex-direction: column;
  gap: var(--ebhro5-content-gap);
  position: relative;
  z-index: var(--ebhro5-z-content);
}

.ebhro5-content {
  opacity: var(--ebhro5-opacity-zero);
  transform: translateY(var(--ebhro5-content-translate-y));
  transition: opacity var(--ebhro5-transition-duration) var(--ebhro5-transition-easing), transform var(--ebhro5-transition-duration) var(--ebhro5-transition-easing);
}

.ebhro5-in {
  opacity: var(--ebhro5-opacity-one) !important;
  transform: translateY(var(--ebhro5-content-translate-zero)) !important;
}

.ebhro5-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ebhro5-badge-gap);
  padding: var(--ebhro5-badge-padding);
  background: var(--ebhro5-badge-bg);
  border: var(--ebhro5-badge-border-width) solid var(--ebhro5-badge-border-color);
  border-radius: var(--ebhro5-badge-border-radius);
  color: var(--ebhro5-badge-color);
  font-size: var(--ebhro5-badge-font-size);
  font-weight: var(--ebhro5-badge-font-weight);
  width: fit-content;
  backdrop-filter: blur(var(--ebhro5-badge-blur));
}

@media(max-width:900px) {
  .ebhro5-badge { margin: var(--ebhro5-margin-auto); }
}

.ebhro5-title {
  font-size: var(--ebhro5-title-font-size);
  font-weight: var(--ebhro5-title-font-weight);
  color: var(--ebhro5-title-color);
  line-height: var(--ebhro5-title-line-height);
  letter-spacing: var(--ebhro5-title-letter-spacing);
}

.ebhro5-hl {
  background: var(--ebhro5-hl-bg);
  background-size: var(--ebhro5-hl-bg-size);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eb5-shift var(--ebhro5-gradient-shift-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

@keyframes eb5-shift {
  0%, 100% { background-position: var(--ebhro5-hl-bg-pos-rest) }
  50% { background-position: var(--ebhro5-hl-bg-pos-mid) }
}

.ebhro5-desc {
  font-size: var(--ebhro5-desc-font-size);
  line-height: var(--ebhro5-desc-line-height);
  color: var(--ebhro5-desc-color);
  max-width: var(--ebhro5-desc-max-width);
}

@media(max-width:900px) {
  .ebhro5-desc { margin: var(--ebhro5-margin-auto); }
}

.ebhro5-stats {
  display: flex;
  gap: var(--ebhro5-stats-gap);
  padding: var(--ebhro5-stats-padding);
  background: var(--ebhro5-stats-bg);
  border: var(--ebhro5-stats-border-width) solid var(--ebhro5-stats-border-color);
  border-radius: var(--ebhro5-stats-border-radius);
  backdrop-filter: blur(var(--ebhro5-stats-blur));
  width: fit-content;
}

@media(max-width:900px) {
  .ebhro5-stats { margin: var(--ebhro5-margin-auto); }
}

@media(max-width:480px) {
  .ebhro5-stats {
    gap: var(--ebhro5-stats-gap-mobile);
    padding: var(--ebhro5-stats-padding-mobile);
    flex-wrap: wrap;
    justify-content: center;
  }
}

.ebhro5-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ebhro5-stat-gap);
}

.ebhro5-num {
  font-size: var(--ebhro5-num-font-size);
  font-weight: var(--ebhro5-num-font-weight);
  color: var(--ebhro5-num-color);
}

.ebhro5-sp {
  font-size: var(--ebhro5-sp-font-size);
  font-weight: var(--ebhro5-sp-font-weight);
  color: var(--ebhro5-sp-color);
}

.ebhro5-sl {
  font-size: var(--ebhro5-sl-font-size);
  color: var(--ebhro5-sl-color);
  font-weight: var(--ebhro5-sl-font-weight);
  white-space: nowrap;
}

.ebhro5-stat-sep {
  width: var(--ebhro5-stat-sep-width);
  height: var(--ebhro5-stat-sep-height);
  background: var(--ebhro5-stat-sep-bg);
}

.ebhro5-btns {
  display: flex;
  gap: var(--ebhro5-btns-gap);
  flex-wrap: wrap;
}

@media(max-width:900px) {
  .ebhro5-btns { justify-content: center; }
}

.ebhro5-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ebhro5-btn-gap);
  padding: var(--ebhro5-btn-padding);
  border-radius: var(--ebhro5-btn-border-radius);
  font-family: var(--ebhro5-font-family);
  font-size: var(--ebhro5-btn-font-size);
  font-weight: var(--ebhro5-btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  border: var(--ebhro5-btn-border);
  transition: all var(--ebhro5-btn-transition-duration) var(--ebhro5-btn-transition-easing);
}

.ebhro5-btn-pri {
  background: var(--ebhro5-btn-primary-bg);
  color: var(--ebhro5-btn-primary-color);
  box-shadow: var(--ebhro5-btn-primary-shadow);
}

.ebhro5-btn-pri:hover {
  transform: var(--ebhro5-btn-primary-hover-transform);
  box-shadow: var(--ebhro5-btn-primary-hover-shadow);
}

.ebhro5-btn-sec {
  background: var(--ebhro5-btn-secondary-bg);
  border: var(--ebhro5-btn-secondary-border-width) solid var(--ebhro5-btn-secondary-border-color);
  color: var(--ebhro5-btn-secondary-color);
}

.ebhro5-btn-sec:hover {
  background: var(--ebhro5-btn-secondary-hover-bg);
  border-color: var(--ebhro5-btn-secondary-hover-border-color);
}

.ebhro5-nav {
  position: relative;
  z-index: var(--ebhro5-z-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ebhro5-nav-gap);
  padding: var(--ebhro5-nav-padding);
}

.ebhro5-arrow {
  width: var(--ebhro5-arrow-size);
  height: var(--ebhro5-arrow-size);
  border-radius: var(--ebhro5-arrow-border-radius);
  background: var(--ebhro5-arrow-bg);
  border: var(--ebhro5-arrow-border-width) solid var(--ebhro5-arrow-border-color);
  color: var(--ebhro5-arrow-color);
  font-size: var(--ebhro5-arrow-font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ebhro5-arrow-transition-duration) var(--ebhro5-arrow-transition-easing);
}

.ebhro5-arrow:hover {
  background: var(--ebhro5-arrow-hover-bg);
  border-color: var(--ebhro5-arrow-hover-border-color);
  color: var(--ebhro5-arrow-hover-color);
}

.ebhro5-indicators {
  display: flex;
  gap: var(--ebhro5-indicators-gap);
}

.ebhro5-dot {
  width: var(--ebhro5-dot-size);
  height: var(--ebhro5-dot-size);
  border-radius: var(--ebhro5-dot-border-radius);
  background: var(--ebhro5-dot-bg);
  cursor: pointer;
  transition: all var(--ebhro5-dot-transition-duration) var(--ebhro5-dot-transition-easing);
}

.ebhro5-dot.ebhro5-active {
  width: var(--ebhro5-dot-active-width);
  border-radius: var(--ebhro5-dot-active-border-radius);
  background: var(--ebhro5-dot-active-bg);
}

.ebhro5-progress {
  position: absolute;
  bottom: var(--ebhro5-pos-zero);
  left: var(--ebhro5-pos-zero);
  right: var(--ebhro5-pos-zero);
  height: var(--ebhro5-progress-height);
  z-index: var(--ebhro5-z-progress);
  background: var(--ebhro5-progress-bg);
}

.ebhro5-progress-bar {
  height: var(--ebhro5-height-full);
  width: var(--ebhro5-progress-bar-width);
  background: var(--ebhro5-progress-bar-bg);
  border-radius: var(--ebhro5-progress-bar-border-radius);
}

.ebhro5-content {
  transition-delay: var(--ebhro5-transition-delay);
}

@media(max-width:768px) {
  .ebhro5-stage { padding: var(--ebhro5-stage-padding-mobile); }
  .ebhro5-title { font-size: var(--ebhro5-title-font-size-mobile); }
}

@media(prefers-reduced-motion:reduce) {
  .ebhro5-atmos::before,
  .ebhro5-atmos::after {
    animation: none;
    opacity: var(--ebhro5-atmos-reduced-opacity);
  }
  .ebhro5-atmos-grid::after {
    animation: none;
    opacity: var(--ebhro5-grid-shimmer-reduced-opacity);
  }
  .ebhro5-atmos-orb {
    animation: none !important;
  }
  .ebhro5-particle {
    animation: none !important;
    opacity: var(--ebhro5-particle-reduced-opacity);
  }
  .ebhro5-slide-blob {
    animation: none !important;
  }
}